<template>
  <div class="vc-progress" ref="progressRef">
    <div class="vc-progress-bg" :style="setBgStyle()">
      <div class="vc-progress-item" :style="setStyle()"></div>
    </div>
    <div class="vc-progress-text" v-if="props.showText">
      <slot name="text" :percent="percent"></slot>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'basic',
  };
</script>

<script setup>
  import {
    ref,
    watchEffect,
    watch,
    reactive,
    toRefs,
    defineProps,
    defineEmits,
    defineExpose,
    markRaw,
    computed,
    toRaw,
  } from 'vue';
  import { isArray, isNumber } from '@/utils/config.js';
  import { setIndex, getIndex } from './setIndex.js';
  const props = defineProps({
    height: {
      type: [String, Number],
      default: 10,
    },
    value: {
      type: [String, Number],
      default: 0,
    },
    // 最大值
    maxValue: {
      type: [String, Number],
      default: 100,
    },
    background: {
      type: [String, Array],
      default: '',
    },
    color: {
      type: [String, Array],
      default: '',
    },
    round: {
      type: Boolean,
      default: false,
    },
    showText: {
      type: Boolean,
      default: false,
    },
    animate: {
      type: Boolean,
      default: false,
    },
    dur: {
      type: String,
      default: '3s',
    },
    delay: {
      type: String,
      default: '0s',
    },
    repeatCount: {
      type: String,
      default: '1',
    },
    fill: {
      type: String,
      default: 'forwards', //  动画结束停在终止状态 // remove  动画结束回到起始状态
    },
    transitionName: {
      type: String,
      default: 'ease',
    },
  });
  setIndex();
  const percent = ((Number(props.value) / Number(props.maxValue)) * 100).toFixed(2) / 1;
  const progressRef = ref();
  const setBgStyle = () => {
    let style = {};
    if (isArray(props.background)) {
      style.background = `linear-gradient(90deg,${props.background[0]} 0%,${props.background[1]} 100%)`;
    } else {
      style.background = props.background;
    }
    if (props.round) {
      style.borderRadius = '10px';
    }
    return style;
  };
  const setStyle = () => {
    let style = {};
    style.width = percent + '%';
    if (isNumber(props.height)) {
      style.height = props.height + 'px';
    } else {
      style.height = props.height;
    }
    if (isArray(props.color)) {
      style.background = `linear-gradient(90deg,${props.color[0]} 0%,${props.color[1]} 100%)`;
    } else {
      style.background = props.color;
    }
    if (props.round) {
      style.borderRadius = '10px';
    }
    if (props.animate) {
      const keyframes = `@keyframes basicAnimate${getIndex()}{
          from {
            width:0;
          }
          to {
            width:${style.width}
          }
      }`;
      style.animation = `basicAnimate${getIndex()} ${props.dur} ${props.transitionName} ${
        props.delay
      } ${props.repeatCount} ${props.fill}`;
      // 创建style标签
      const styleDom = document.createElement('style');
      // 设置style属性
      styleDom.type = 'text/css';
      // 将 keyframes样式写入style内
      styleDom.innerHTML = keyframes;
      // 将style样式存放到head标签
      document.head.appendChild(styleDom);
    }
    return style;
  };
</script>

<style lang="less" scoped>
  .vc-progress {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    &-bg {
      background: @gray-f0;
      flex: 1;
    }
    &-item {
      background: @primary;
    }
    &-text {
      margin-left: 10px;
      font-size: 12px;
    }
  }
</style>
